<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import * as admin from '@/api/indexdata.js';  // 假设你的 API 在这里
const router = useRouter();
// 获取路由信息
const route = useRoute();
const destinationId = route.query.id; // 假设你通过 query 获取目的地 ID

// 景点数据
const spotsList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取景点列表
const getSpotsList = async () => {
  const jinquId_data = route.query.jinquId;
  const params = {
    currentPage: currentPage.value,
    jinquId: jinquId_data,
  };
  const res = await admin.articleJindianListService(params); // 替换为实际接口调用
  spotsList.value = res.data;  // 假设返回的景点列表在 `data.items` 中
  total.value = res.total
};

const handlePageChange = (page) => {
  currentPage.value = page;
  getSpotsList();  // 切换页面时重新获取景点数据
};

const goToJindianData = (id) => {
  // 跳转到景点详情页面
  router.push({path:'/indexJindianData',query:{jindianId:id}});
};

// 获取数据
onMounted(() => {
  getSpotsList();
});
</script>

<template>
  <el-main>
    <el-row :gutter="20" justify="center">
      <el-col :span="18">
        <!-- 特色景点列表 -->
        <div class="spot-list">
          <el-row :gutter="20">
            <!-- 景点项 -->
            <el-col v-for="(spot, index) in spotsList" :key="index" :span="8">
              <el-card class="spot-item" @click="goToJindianData(spot.id)">
                <img :src="spot.img" alt="景点图片" class="spot-image"/>
                <div class="spot-info">
                  <h3>{{ spot.name }}</h3>
                  <p><strong>地址：</strong>{{ spot.address }}</p>
                  <p><strong>所属景区：</strong>{{ spot.jindianName }}</p>
                  <p><strong>描述：</strong>{{ spot.content }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 分页 -->
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="handlePageChange"
            layout="prev, pager, next, jumper">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </el-main>
</template>

<style scoped>
/* 整体背景和内边距 */
.el-main {
  background-color: #f4f7fc;
  padding: 30px;
}

/* 景点列表样式 */
.spot-list {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
}

/* 景点卡片 */
.spot-item {
  margin-bottom: 25px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.spot-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.spot-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.spot-item:hover .spot-image {
  transform: scale(1.1);
}

.spot-info {
  padding: 20px;
  font-size: 16px;
  color: #333;
}

.spot-info h3 {
  font-size: 22px;
  font-weight: 600;
  color: #4A90E2;
  margin-bottom: 10px;
}

.spot-info p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 8px;
}

.spot-info p strong {
  color: #333;
}

/* 分页样式 */
.el-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.el-pagination .el-button--primary {
  background-color: #4A90E2;
  border-color: #4A90E2;
  color: #fff;
}

.el-pagination .el-button--primary:hover {
  background-color: #357ABD;
  border-color: #357ABD;
}

.el-pagination .el-button {
  padding: 5px 15px;
}

.el-pagination .el-icon-arrow-left,
.el-pagination .el-icon-arrow-right {
  color: #4A90E2;
}
</style>
